import { pageTophubOperate } from '@/services/api/api-tophub-operate';
import { CheckCircleOutlined } from '@ant-design/icons';
import { ActionType, ModalForm, ProColumns, ProTable } from '@ant-design/pro-components';
import { useAccess, useModel } from '@umijs/max';
import { message, Tag } from 'antd';
import React, { useRef, useState } from 'react';
import AddRecord from './AddOperate';
import DetailsOperate from './DetailsOperate';

interface TabOperateProps {}

const TabOperate: React.FC<TabOperateProps> = ({}) => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [search, setSearch] = useState({
    hotName: '',
    datahubLevelIds: [2000, 3000],
    hotIsCitys: ['0', '1'],
  });

  const columns: ProColumns<TophubOperateData.OperatePage>[] = [
    {
      title: '收录',
      dataIndex: 'insertTypes',
      hideInTable: true,
      valueEnum: {
        1: { text: '自动收录' },
        2: { text: '手工录入' },
      },
    },
    {
      title: '审核',
      dataIndex: 'states',
      hideInTable: true,
      valueEnum: {
        1: { text: '待审核' },
        2: { text: '退回' },
        3: { text: '发布' },
      },
    },
    {
      title: '渠道',
      dataIndex: 'hotTypes',
      hideInTable: true,
      valueEnum: {
        1: { text: '微博' },
        2: { text: '抖音' },
        4: { text: '今日头条' },
      },
    },

    {
      title: '范围',
      dataIndex: 'hotIsCitys',
      hideInTable: true,
      valueEnum: {
        0: { text: '全国' },
        1: { text: '重庆' },
      },
    },
    {
      title: '媒体',
      dataIndex: 'datahubLevelIds',
      hideInTable: true,
      valueEnum: {
        2000: { text: '市属媒体' },
        3000: { text: '区县媒体' },
      },
    },
    {
      title: '热点',
      dataIndex: 'hotName',
      align: 'center',
      copyable: true,
      ellipsis: true,
      width: '30%',
      render: (dom, entity, index, action) => (
        <div
          style={{
            textAlign: 'start',
          }}
        >
          {entity.insertType == 1 ? (
            <Tag color="blue">自动收录</Tag>
          ) : (
            <Tag color="orange">手工录入</Tag>
          )}
          {entity.state == 1 ? (
            <Tag color="blue">待审核</Tag>
          ) : entity.state == 2 ? (
            <Tag color="red">退回</Tag>
          ) : (
            <Tag color="green">发布</Tag>
          )}
          <DetailsOperate
            dom={dom}
            data={entity}
            onRefurbish={() => {
              action?.reload();
            }}
          />
        </div>
      ),
    },
    {
      title: '媒体',
      dataIndex: 'datahubLevelId',
      align: 'center',
      valueEnum: {
        2000: { text: '市属媒体' },
        3000: { text: '区县媒体' },
      },
    },
    {
      title: '账号',
      dataIndex: 'datahubSourceName',
      align: 'center',
      render: (dom, entity, index, action) => entity.datahubSourceName,
    },
    {
      title: '渠道',
      dataIndex: 'hotType',
      align: 'center',
      hideInForm: true,
      search: false,
      valueEnum: {
        1: { text: '微博' },
        2: { text: '抖音' },
        4: { text: '今日头条' },
      },
    },
    {
      title: '范围',
      dataIndex: 'hotIsCity',
      align: 'center',
      hideInForm: true,
      search: false,
      valueEnum: {
        0: { text: '全国' },
        1: { text: '重庆' },
      },
    },
    {
      title: '上榜时间',
      dataIndex: 'hotInsertTime',
      search: false,
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      valueType: 'option',
      width: '120px',
      fixed: 'right',
      render: (_, row, index, action) => [
        <ModalForm
          key={'modal_form_record_state_release'}
          title={
            <>
              <CheckCircleOutlined
                style={{
                  marginRight: 8,
                  color: '#108ee9',
                }}
              />
              删除
            </>
          }
          trigger={
            <a key="button_record_state_release" type="primary">
              删除
            </a>
          }
          autoFocusFirstInput
          modalProps={{
            width: 400,
            // bodyStyle: { textAlign: 'center' },
            destroyOnClose: true,
            onCancel: () => console.log('run'),
          }}
          submitTimeout={2000}
          submitter={{
            submitButtonProps: {
              type: 'primary',
            },
          }}
          onFinish={async (values) => {
            // const response = await updateTophubState({
            //   id: data.id,
            //   state: 1, //提交
            //   ...values,
            //   remarks: formValues.remarks,
            //   attachments: attachments,
            // });
            // if (response.code == 0) {
            //   onRefurbish();
            //   setOpenState(false);
            //   return true;
            // }
          }}
        ></ModalForm>,
        <ModalForm
          key={'modal_form_record_state_release'}
          title={
            <>
              <CheckCircleOutlined
                style={{
                  marginRight: 8,
                  color: '#108ee9',
                }}
              />
              排除
            </>
          }
          trigger={
            <a key="button_record_state_release" type="primary">
              排除
            </a>
          }
          autoFocusFirstInput
          modalProps={{
            width: 400,
            // bodyStyle: { textAlign: 'center' },
            destroyOnClose: true,
            onCancel: () => console.log('run'),
          }}
          submitTimeout={2000}
          submitter={{
            submitButtonProps: {
              type: 'primary',
            },
          }}
          onFinish={async (values) => {
            // const response = await updateTophubState({
            //   id: data.id,
            //   state: 1, //提交
            //   ...values,
            //   remarks: formValues.remarks,
            //   attachments: attachments,
            // });
            // if (response.code == 0) {
            //   onRefurbish();
            //   setOpenState(false);
            //   return true;
            // }
          }}
        ></ModalForm>,
        ,
      ],
    },
  ];

  return (
    <>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}, sorter) => {
          if (params.insertTypes) {
            params.insertTypes = [params.insertTypes];
          } else {
            params.insertTypes = [1, 2];
          }

          if (params.states) {
            params.states = [params.states];
          } else {
            params.states = [1, 2, 3];
          }

          if (params.hotTypes) {
            params.hotTypes = [params.hotTypes];
          } else {
            params.hotTypes = [1, 2, 4];
          }

          if (params.hotIsCitys) {
            params.hotIsCitys = [params.hotIsCitys];
          } else {
            params.hotIsCitys = [0, 1];
          }

          if (params.datahubLevelIds) {
            params.datahubLevelIds = [params.datahubLevelIds];
          } else {
            params.datahubLevelIds = [2000, 3000];
          }

          const response = await pageTophubOperate({
            ...params,
            sorter: sorter,
            ...search,
          });

          if (response.code == 0) {
            return {
              data: response.data?.data,
              success: true,
              total: response.data?.total,
            };
          } else {
            message.error(response.msg);
            return {
              data: [],
              success: false,
              total: 0,
            };
          }
        }}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
          onChange(value) {
            console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
          defaultCollapsed: true,
          collapsed: false,
          collapseRender: false,
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          pageSize: 20,
        }}
        headerTitle="热搜列表"
        toolBarRender={() => [
          <AddRecord
            onRefurbish={() => {
              actionRef.current?.reload();
            }}
          />,
        ]}
      />
    </>
  );
};
export default TabOperate;
